import React, { useState, useRef } from 'react'
import { SearchOutlined, DownOutlined } from '@ant-design/icons'
import { Button, Input } from 'antd'

import SelectCom from './components/SelectCom'

import '../scss/RcQuery.scss'

export default function RcQuery() {
    const [selectData, setSelectData] = useState([])
    const [inputData, setInputData] = useState('')

    const refContainer = useRef(null);

    const iconStyle = { fontSize: '18px' }

    // 命中次数下拉内容
    const numData = {
        // 左开右闭
        a: '0~50',
        b: '50~80',
        c: '80~100'
    }

    // 到期时间下拉内容
    const timeData = {
        a: '1天内',
        b: '3天内',
        c: '1周内'
    }

    // 命中次数下拉事件
    const slectChange1 = (e) => {
        setSelectData([
            ...selectData,
            e
        ])
    }

    // 到期时间下拉事件
    const slectChange2 = (e) => {
        setSelectData([
            ...selectData,
            e
        ])
        // console.log("selectData", selectData)
    }


    // 响应式数据绑定
    const inputDataFn = (e) => {
        setInputData(e.target.value)
    }

    // 输入框失去焦点后的事件
    const inputBlur = (e) => {
        const inputTxt = e.target.value
        setSelectData([
            ...selectData,
            inputTxt
        ])
        // console.log(e.target.value)
        // console.log("refContainer",refContainer.current.props.value)
    }

    // 点击查询按钮 发起请求
    const queryBtn = () => {
        console.log("发起请求", selectData)

        // 清空 输入框内容
        setInputData('')
        setSelectData([])
    }

    return (
        <div id="rcQuery">
            {/* 头部 */}
            <div className="header">
                <div className="header-left">
                    <SearchOutlined style={iconStyle} className="query-icon" />
                    <span>筛选查询</span>
                </div>
                <div className="header-right">
                    <div className="drop-down-icon">
                        <DownOutlined style={iconStyle} className="down-icon" />
                        <span>展开筛选</span>
                    </div>
                    <Button onClick={queryBtn}>查询结果</Button>
                </div>
            </div>
            {/* 内容 */}
            <div className="queryInput">
                <div className="rulesName">
                    <span>规则名称: </span>
                    <Input placeholder="规则名称" ref={refContainer} value={inputData} onChange={inputDataFn} onBlur={inputBlur} />
                </div>
                <div className="hitNumber">
                    <span>命中次数: </span>
                    <SelectCom msg="num" onChange={slectChange1}>{numData}</SelectCom>
                </div>
                <div className="dueTime">
                    <span>到期时间: </span>
                    <SelectCom msg="time" onChange={slectChange2}>{timeData}</SelectCom>
                </div>
            </div>
        </div>
    )
}
